<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue基础4</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 
            v-if: 表达式取值为真显示,为假从DOM上移除
            v-else: 否则; 类似 js 中 if-else
            v-else-if: 类似if-else if -else 
            如果需要 v-else , v-else-if, 必须先写 v-if ,
            并且 v-if 与 v-else-if 
            指令所在的标签必须是同级的相邻标签
        -->
        <h1 v-if="ok">YES</h1>
        <h1 v-else>NO</h1>

        <!--
            vue中为了尽可能的提高渲染效率,
            会尽可能复用元素,而不是从头渲染,
            如下,当切换登录框方式的时候,理论上应该是删除现有
            的label,input,新建另一种情况的label,input渲染到DOM,
            但是从效果上可以看出,使用的还是同一个input,label,
            只不过换了label的内容,input的占位符;

            当复用元素不符合要求时,可以通过添加唯一的标识符key,
            表明这两个元素是完全独立的 不能复用
        -->
        <template v-if="loginType=='username'">
            <lable>username</lable>
            <input type="text" placeholder="请输入用户名" key="username">
        </template>
        <template v-else>
            <lable>email</lable>
            <input type="text" placeholder="请输入密码" key="email">
        </template>
        <!--
            v-show: 表达式取值为真显示,取值为假隐藏(diaplay:none )

            如果需要非常频繁地切换，则使用 v-show 较好；
            如果在运行时条件不太可能改变，则使用 v-if 较好。

            template: 是一个虚标签,用来包裹html片段,配合v-if使用
            当然, 使用div包裹html片段,也可以达到同样的效果,
            但是会向DOM中添加无关元素,不被提倡
        -->
        <p v-show="isShow">使用v-show控制显隐,点击下方标签可以</p>

        <button @click="changeLoginType">切换登录方式</button>



    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                ok: false,
                loginType: 'username',
                isShow: false,
            },
            methods: {
                changeLoginType: function () {
                    this.loginType = this.loginType == 'username' ? 'email' : 'username';
                    console.log(this.loginType);
                    this.isShow = !this.isShow
                }
            },
        })
    </script>
</body>

</html>